<template>
  <div class="app-container">
    <div>
      <el-select
        v-model="OrgViewModel.org_type"
        @change="queryUser"
        size="small"
        class="filter-item"
        placeholder="请选机构类别"
      >
        <el-option v-for="item in typeOptions" :key="item" :label="item| typeFilter" :value="item" />
      </el-select>
      <el-input
        v-model="OrgViewModel.org_code"
        placeholder="机构编码"
        style="width: 200px;"
        class="filter-item"
        size="small"
        @keyup.enter.native="queryUser"
      />
      <el-input
        v-model="OrgViewModel.org_name"
        placeholder="机构名称"
        style="width: 200px;"
        size="small"
        class="filter-item"
        @keyup.enter.native="queryUser"
      />
      <el-input
        v-model="OrgViewModel.org_owner"
        placeholder="管理员"
        style="width: 200px;"
        class="filter-item"
        size="small"
        @keyup.enter.native="queryUser"
      />
      <el-button type="primary" size="small" @click="queryUser" icon="el-icon-search">查询</el-button>
      <el-button type="primary" size="small" @click="handleAddRole" icon="el-icon-plus">新增</el-button>
      <el-button type="primary" size="small" @click="refreshUser" icon="el-icon-refresh">刷新</el-button>
    </div>
    <el-table
      v-loading="loading"
      :data="orgList"
      style="width: 100%;margin-top:30px;"
      border
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      @sort-change="sortChange"
    >
      <el-table-column label="机构类型" sortable="custom" prop="org_type">
        <template slot-scope="scope">{{ scope.row.org_type | typeFilter}}</template>
      </el-table-column>
      <el-table-column label="机构编码" sortable="custom" prop="org_code">
        <template slot-scope="scope">{{ scope.row.org_code }}</template>
      </el-table-column>
      <el-table-column label="机构名称" sortable="custom" prop="org_name">
        <template slot-scope="scope">
          <!-- <el-link type="primary" @click="handleShow(scope)">{{ scope.row.org_name }}</el-link> -->
          {{ scope.row.org_name }}
        </template>
      </el-table-column>
      <el-table-column label="邀请码">
        <template slot-scope="scope">{{ scope.row.InviteCode }}</template>
      </el-table-column>
      <el-table-column label="创建时间" width="160" sortable="custom" prop="CreateTime">
        <template slot-scope="scope">{{ scope.row.CreateTime | formatDateSec}}</template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="220">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope)" icon="el-icon-edit">编辑</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope)" icon="el-icon-delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件：https://element.eleme.cn/#/zh-CN/component/pagination -->
    <div class="block" style="float:right;margin-top:15px;" v-if="OrgViewModel.total>0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="OrgViewModel.page"
        :page-sizes="[10, 20, 30, 40,100]"
        :page-size="OrgViewModel.pageSize"
        @prev-click="lastPage"
        @next-click="nextPage"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="OrgViewModel.total"
      ></el-pagination>
    </div>

    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :title="dialogType==='edit'?'编辑机构':'新增机构'"
    >
      <el-form
        :model="org"
        :rules="rules"
        ref="org"
        label-width="80px"
        label-position="right"
        style="width: 98%;"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="机构名称" prop="org_name">
              <el-input v-model="org.org_name" placeholder="机构名称" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="机构类别" prop="org_type">
              <el-select v-model="org.org_type" placeholder="请选机构类别" style="width:100%">
                <el-option
                  v-for="item in typeOptions"
                  :key="item"
                  :label="item| typeFilter"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>-->
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="机构编码" v-if="dialogType!=='edit'" prop="org_code">
              <el-input v-model="org.org_code" placeholder="机构编码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学生上限" prop="AccountLimit">
              <el-input-number
                v-model="org.AccountLimit"
                :min="0"
                :step="1"
                step-strictly
                label="学生上限"
                style="width:100%;"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="固定电话" prop="owner_call">
              <el-input v-model="org.owner_call" placeholder="固定电话" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="移动电话" prop="owner_phone">
              <el-input v-model="org.owner_phone" placeholder="移动电话" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="机构地址">
              <el-input v-model="org.org_adress" placeholder="机构地址" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="备注">
            <el-input
              v-model="org.org_remark"
              :autosize="{ minRows: 2, maxRows: 4}"
              type="textarea"
              placeholder="备注"
            />
          </el-form-item>
        </el-row>
        <div style="text-align:right">
          <el-button type="danger" size="mini" @click="dialogVisible=false">取消</el-button>
          <el-button type="primary" size="mini" @click="confirmRole('org')">确认</el-button>
        </div>
      </el-form>
    </el-dialog>

    <el-dialog :visible.sync="dialogVisibleshow" :close-on-click-modal="false" :title="'组织信息概览'">
      <el-form
        :model="org"
        :rules="rules"
        ref="org"
        label-width="80px"
        label-position="right"
        style="width: 90%;"
      >
        <el-divider content-position="left">机构信息</el-divider>
        <el-row border>
          <el-col :span="12">
            <el-form-item label="机构类别">{{org.org_type | typeFilter}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="机构名称">{{org.org_name}}</el-form-item>
          </el-col>
        </el-row>
        <el-row border>
          <el-col :span="12">
            <el-form-item label="机构编码">{{org.org_code}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="固定电话">{{org.owner_call}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="移动电话">{{org.owner_phone}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="机构地址">{{org.org_adress}}</el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left">成员信息</el-divider>
        <el-row>
          <el-col :span="24">
            <el-input
              size="mini"
              v-model="username"
              placeholder="姓名"
              style="width: 200px;"
              class="filter-item"
              @keyup.enter.native="queryUser1"
            />
            <el-button type="primary" size="mini" @click="queryUser1" icon="el-icon-search">查询</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-tag
              v-for="item in teacherList"
              :key="item.UserId"
              size="medium"
              style="margin-right:8px;margin-top:8px"
            >{{item.UserName}}</el-tag>
          </el-col>
        </el-row>
        <!--  <el-table v-loading="loading" :data="teacherList" style="width: 100%;margin-top:30px;" border
          @sort-change="sortChange">
          <el-table-column align="center" label="用户名" sortable="custom" prop="UserName">
            <template slot-scope="scope">{{ scope.row.UserName }}</template>
          </el-table-column>
          <el-table-column align="center" label="登录名" sortable="custom" prop="LoginName">
            <template slot-scope="scope">{{ scope.row.LoginName }}</template>
          </el-table-column>
          <el-table-column align="center" label="手机号" sortable="custom" prop="MobilePhone">
            <template slot-scope="scope">{{ scope.row.MobilePhone }}</template>
          </el-table-column>
          <el-table-column align="center" label="邮箱" prop="Email">
            <template slot-scope="scope">{{ scope.row.Email }}</template>
          </el-table-column>
        </el-table>


         <template>
  <div>
	<studentshow ref="studentshow"/>

  </div>
        </template>-->
      </el-form>
    </el-dialog>
  </div>
</template>

<script src="@/js/suborg/index.ts">
</script>
